<template>
  <div class="app-container">
    <div class="chart-container">
      <div id="genderChart" style="width: 50%;height:600px;float:left;"/>
      <div id="entryYearChart" style="width: 50%;height:600px;float:left;"/>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {getList} from '@/api/student.js'

export default {
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      // 获取学员数据
      getList().then(response => {
        const studentData = response.data.data;
        // 统计性别分布
        const genderMap = {'男': 0, '女': 0};
        // 统计入学年份分布
        const entryYearMap = {};
        studentData.forEach(student => {
          // 性别统计
          genderMap[student.gender === 1 ? '男' : '女']++;
          // 入学年份统计（取年份部分）
          const entryYear = student.entry;
          entryYearMap[entryYear] = (entryYearMap[entryYear] || 0) + 1;
        });
        // 初始化两个饼图
        const genderChart = echarts.init(document.getElementById('genderChart'));
        const entryYearChart = echarts.init(document.getElementById('entryYearChart'));
        // 入学年份占比饼图配置
        entryYearChart.setOption({
          title: {
            text: '学员入学年份占比',
            left: 'center',
            textStyle: {color: '#333', fontSize: 16, fontWeight: 'bold'}
          },
          legend: {top: 'bottom'},
          tooltip: {formatter: '{b}: {c}人 ({d}%)'},
          series: [{
            name: '年份占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: '{b|{b}}\n{per|{d}%}',
              rich: {
                b: {fontSize: 12, color: '#666', padding: [0, 5]},
                per: {color: '#999', fontSize: 12}
              }
            },
            emphasis: {
              itemStyle: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.1)'}
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#2F66F0'},
                {offset: 1, color: '#C94F4F'}
              ])
            },
            data: Object.entries(entryYearMap).map(([name, value]) => ({name: `${name}年`, value}))
          }]
        });
        // 性别占比饼图配置
        genderChart.setOption({
          title: {
            text: '学员性别分布统计',
            left: 'center',
            textStyle: {
              color: '#333',
              fontSize: 18,
              fontWeight: 'bold'
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: '{b0}: {c0}人',
            backgroundColor: 'rgba(255,255,255,0.9)',
            textStyle: {color: '#666'}
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: Object.keys(genderMap),
            axisLabel: {
              color: '#666',
              fontSize: 12
            },
            axisLine: {
              lineStyle: {color: '#e6e6e6'}
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#666',
              fontSize: 12,
              formatter: '{value} 人'
            },
            axisLine: {
              lineStyle: {color: '#e6e6e6'}
            },
            splitLine: {
              lineStyle: {color: '#f5f5f5'}
            }
          },
          title: {
            text: '学员性别占比',
            left: 'center',
            textStyle: {color: '#333', fontSize: 16, fontWeight: 'bold'}
          },
          legend: {top: 'bottom'},
          tooltip: {formatter: '{b}: {c}人 ({d}%)'},
          series: [{
            name: '性别占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: '{b|{b}}\n{per|{d}%}',
              rich: {
                b: {fontSize: 12, color: '#666', padding: [0, 5]},
                per: {color: '#999', fontSize: 12}
              }
            },
            emphasis: {
              itemStyle: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.1)'}
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#CF7374'},
                {offset: 1, color: '#333'}
              ])
            },
            data: Object.entries(genderMap).map(([name, value]) => ({name, value}))
          }],
        });
      });
    }
  }
}
</script>
